import React from 'react';
import { Button, Card, Modal, Space, Table, message } from 'antd';
import { useLocation } from 'react-router';
import _ from 'lodash';
import dayjs from 'dayjs';
import { useParams } from 'react-router-dom';
import { PAGINATIONCONFIG } from '@/constant/page';
import TransferoutPopup from '../op/transferoutPopup';
import { TCHR_CHANGE_RESON_TYPE } from '@/constant/teachOptions';
import { APPROVAL_STATUS } from '@/constant';
import { TeachersSrv } from '@/service/teacher';
import { getTransactionByTeacher, transactionRevoked } from '@/service/teacher/transaction';
import { get_stoge_pz, set_stoge_pz } from '@/utils';
import { isPermissionOperate } from '@/component/permission-button';

const Groups: React.FC = () => {
  const [value, setValue] = React.useState([]);
  // const [total, setTotal] = React.useState(0);
  // const [pageSize, setPageSize] = React.useState(get_stoge_pz(10, 'change_workchange'));
  // const [pageIndex, setPageIndex] = React.useState(1);
  const [loading, setLoading] = React.useState(false);
  const [selectDataType, setSelectDataType] = React.useState<Array<any>>([]);
  //const location = useLocation();
  const [showTransferoutForm, setShowTransferoutForm] = React.useState(false);
  const { id } = useParams();
  const columns = [
    {
      title: '变动原因',
      dataIndex: 'transaction_type',
      key: 'transaction_type',
      render: (text, record) => {
        if (text) return _.find(TCHR_CHANGE_RESON_TYPE, { value: String(text) })?.label;
        return text;
      },
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    },
    // {
    //   title: '申请人',
    //   dataIndex: 'operator_name',
    //   key: 'operator_name',
    // },
    // {
    //   title: '审批人',
    //   dataIndex: 'operator_name',
    //   key: 'operator_name',
    // },
    // {
    //   title: '审批状态',
    //   dataIndex: 'approval_status',
    //   key: 'approval_status',
    //   render: (text, record) => {
    //     if (text) return _.find(APPROVAL_STATUS, { value: String(text) })?.label;
    //     return text;
    //   },
    // },
    {
      title: '申请时间',
      dataIndex: 'transaction_time',
      key: 'transaction_time',
      render: (text, record) => {
        if (text && dayjs(text).isValid()) return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
        return text;
      },
    },
    // {
    //   title: '审批时间',
    //   dataIndex: 'operation_time',
    //   key: 'operation_time',
    //   render: (text, record) => {
    //     if (text && dayjs(text).isValid()) return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
    //     return text;
    //   },
    // },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      fixed: 'right',
      hidden: !isPermissionOperate(),
      render: (text, record) => (
        <Space size="middle">
          {/* <Button type="link">查看</Button> */}
          {/* {['pending'].includes(record.approval_status) && (
            <Button
              type="link"
              onClick={async () => {
                Modal.confirm({
                  title: '撤回',
                  content: `是否撤回${record.teacher_name}调出?`,
                  onOk: async () => {
                    const res = await transactionRevoked(record.id);
                    if (res.success) {
                      message.success('撤回成功');
                    } else message.error(res.message || res.details);
                  },
                });
              }}
            >
              撤回
            </Button>
          )} */}
          {!['internal'].includes(record.transaction_type) && (
            <Button
              type="link"
              onClick={() => {
                const res: any = TeachersSrv.active(record.teacher_id, record.transaction_id);
                if (res.success) {
                  message.success('操作成功');
                } else {
                  message.error(res.message || res.details);
                }
              }}
            >
              恢复在职
            </Button>
          )}
        </Space>
      ),
    },
  ];
  const searchFunc = async () => {
    setLoading(true);
    const res = await getTransactionByTeacher(id);
    if (res.success) {
      setValue(res.data);
    }
    setLoading(false);
  };

  React.useEffect(() => {
    searchFunc();
  }, []);
  return (
    <Card title="变动信息" bordered={false}>
      <Table
        dataSource={value}
        columns={columns}
        loading={loading}
        scroll={{ x: 'max-content' }}
        //pagination={{ ...PAGINATIONCONFIG, total, pageSize, current: pageIndex, onChange: pageChange }}
      />
      <TransferoutPopup
        onFinish={() => searchFunc()}
        showTransferoutForm={showTransferoutForm}
        setShowTransferoutForm={setShowTransferoutForm}
        selectDataType={selectDataType}
      />
    </Card>
  );
};
export default Groups;
